<template>

  <div>
    <!-- Breadcrumb 面包屑 导航区-->
    <!-- <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">周报管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>周报列表</el-breadcrumb-item>
      </el-breadcrumb> -->
    <!-- Card 卡片 卡片视图区-->
    <el-card class="box-card">
      <div class="handle-box">
        <el-select v-model="queryInfo.fst_id" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.fstName"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <!-- 表格区-->
      <el-table :data="dataList" border stripe>
        <el-table-column type="index" />
        <el-table-column prop="title" label="周报日期" />
        <el-table-column prop="todo" label="实报" />
        <el-table-column prop="num" label="应报" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.todo===scope.row.num?'success':'danger'"
            >{{ scope.row.todo===scope.row.num?'完成':'未完成' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!-- 操作模板-->
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="showDialog(scope.row.fstId,scope.row.title)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域-->
      <el-pagination
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 周报详细信息的对话框-->
    <el-dialog
      title="查看周报"
      :visible.sync="DialogVisible"
      width="80%"
      @close="DialogClosed"
    >
      <div><h3>{{ fstname }} 上报日期：{{ fst_title }}</h3>
        <el-button type="warning" @click="getexcel()">下载EXCEL报表</el-button></div>
      <!-- 周报详细表格区-->
      <el-table :data="weekdetail" border stripe>
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="fstPd" label="发射机" />
        <el-table-column prop="workFre" label="工作频率(MHZ)" />
        <el-table-column prop="inPower" label="入射功率(KW)" />
        <el-table-column prop="backPower" label="反射功率(W)" />
        <el-table-column prop="zhubo" label="驻波比" />
        <el-table-column prop="ambV" label="功放电压(V)" />
        <el-table-column prop="ambA" label="功放电流(A)" />
        <el-table-column prop="mainSignal" label="主用信号源">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.mainSignal==='true'?'success':'danger'"
            >{{ scope.row.mainSignal==='true'?'正常':'异常' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="backSignal" label="备用信号源">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.backSignal==='true'?'success':'danger'"
            >{{ scope.row.backSignal==='true'?'正常':'异常' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="备注" />
        <el-table-column prop="imgs" label="图片">
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 30px"
              :src="scope.row.imgs"
              fit="fill"
              :preview-src-list="previewSrcList"
            />

          </template>
        </el-table-column>
        <el-table-column prop="name" label="提交人" />

      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      DialogVisible: false, // 查看对话框显示与隐藏
      options: [], // 发射天列表
      dataList: [], // 周报列表
      queryInfo: {
        // query: '',
        pagenum: 1, // 当前页码数
        pagesize: 5, // 当前每页有多少条
        fst_id: null // 发射台编号
      },
      weekdetail: [], // 周报详细信息
      total: 0, // 总共有多少条数据
      fstname: '', // 周报的发射台名称
      fst_title: '', // 周报的日期
      fstid: '', // 周报的发射台编号
      previewSrcList: [] // 预览图片列表组
    }
  },
  created() {
    this.getfstData()
  },

  methods: {
    // 优化异步操作 async await
    async getfstData() {
      const { data: res } = await this.$post('Fsts/get_fst_list')
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取数据失败' + res.message)
      this.options = res.data
    },
    async getweekData() {
      // 获取周报列表
      console.log(this.queryInfo)
      const { data: res } = await this.$post('fsjData/get_list', this.queryInfo)
      console.log('ok0')
      console.log(res)
      console.log('ok')
      console.log(res.data.records)
      if (res.code !== 200) return this.$message.error('获取数据失败' + res.message)
      this.dataList = res.data.rows
      this.total = res.data.total
    },
    handleSearch() { // 搜索
      this.getweekData()
    },
    DialogClosed() { // 关闭窗口
      this.DialogVisible = false
    },
    async getexcel() { // 获取excel报表
      // 获取excel报表
      const id = this.fstid
      const title = this.fst_title
      const { data: res } = await this.$postblob('fsjData/getexcel', { fstId: id, title: title })
      const fileName = this.fst_title + '.xlsx'
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
      if ('download' in document.createElement('a')) { // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else { // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
    async showDialog(id, title) { // 显示查看
      // 获取周报详细信息
      const { data: res } = await this.$post('fsjData/detail', { fstId: id, title: title })
      console.log(res.data)
      if (res.code !== 200) {
        return this.$message.error('读取信息失败')
      }
      this.weekdetail = res.data.vFsjData
      this.fstname = res.data.vFsjData[0].fst_name
      this.fstid = id
      this.fst_title = title
      for (let i = 0; i < res.data.length; i++) {
        this.previewSrcList.push(res.data[i].imgs)
      }
      this.DialogVisible = true
    },
    // 监听分页数量设置
    handleSizeChange(newsize) {
      console.log(newsize)
      console.log(this.queryInfo.pagesize)
      this.queryInfo.pagesize = newsize
      this.getweekData()
    },
    // 监听页码值改变
    handleCurrentChange(newpage) {
      console.log(newpage)
      this.queryInfo.pagenum = newpage
      this.getweekData()
    }
  }
}
</script>

    <style lang="less" scoped>
         .user-avatar {
        width: 40px;
        height: 40px;
      }
    </style>
